<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  // 创建一个 3D 地球或地图查看器
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 飞入广州塔
  var position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });

  // 添加3D建筑
  const osmBuildings = viewer.scene.primitives.add(
    new Cesium.createOsmBuildings()
  );

  // 添加椭圆
  const elipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000),
    ellipse: {
      semiMinorAxis: 30.0, // 椭圆长半轴
      semiMajorAxis: 50.0, // 椭圆短半轴
      // extrudedHeight: 300.0, // 图形高度
      height: 200,
      material: Cesium.Color.RED,
    },
  });
  //添加圆柱
  const elipse1 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.31911, 23.109, 1000),
    cylinder: {
      length: 40.0,
      topRadius: 20.0, // 顶部半径
      bottomRadius: 20.0, // 底部半径
      material: Cesium.Color.BLUE,
    },
  });

  // 添加锥形
  const elipse2 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.31912, 23.1091, 800),
    cylinder: {
      length: 40.0,
      topRadius: 0,
      bottomRadius: 20.0,
      material: Cesium.Color.GREEN,
    },
  });

  // 添加走廊
  const elipse3 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.31912, 23.109, 500),
    corridor: {
      positions: {
        // 走廊的路径点,每个路径点由经度、纬度和高度组成
        cartographicDegrees: [
          113.31912, 23.109, 500, 113.319121, 23.109001, 500, 113.31912,
          23.109002, 500,
        ],
      },
      height: 200,
      extrudedHeight: 100, //走廊的挤出高度
      cornerType: 'BEVELED', // 走廊拐角的类型,'ROUNDED'：圆角\'MITERED'：尖角\'BEVELED'：斜角
      material: Cesium.Color.PINK,
    },
  });
});
</script>

<style></style>
